import * as THREE from 'three'
import createApp from '../../core'

/**
 * 朗伯材质能够反光，color属性影响反光，如果是纯黑色就不反光了
 * emissive 自发光颜色
 * emissiveMap 自发光贴图，需要将发光颜色设置为不是黑色
 * emissiveIntensity 自发光强度，默认为1
 */
function createMeshLambertMaterial (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(-120, 100, 150)
  camera.lookAt(scene.position)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const spotLight = new THREE.SpotLight(0xfffff)
  spotLight.position.set(0, 50, 0)
  scene.add(spotLight)

  const ambient = new THREE.AmbientLight(0xffffff, 1)
  scene.add(ambient)

  const { color } = data
  const sphereGeo = new THREE.SphereGeometry(30)
  const sphereMaterial = new THREE.MeshLambertMaterial({ color })
  const sphere = new THREE.Mesh(sphereGeo, sphereMaterial)
  scene.add(sphere)

  const loader = new THREE.TextureLoader()

  import('@/assets/material/brick_roughness.png').then(image => {
    loader.load(image.default, texture => {
      sphereMaterial.emissiveMap = texture
      sphereMaterial.needsUpdate = true
    })
  })

  gui.addColor(data, 'color').onChange(() => {
    sphereMaterial.color = new THREE.Color(data.color)
  })
  gui.addColor(data, 'emissive').onChange(() => {
    sphereMaterial.emissive = new THREE.Color(data.emissive)
  })
  gui.add(data, 'emissiveIntensity', 0, 2).onChange(() => {
    sphereMaterial.emissiveIntensity = data.emissiveIntensity
  })
}

const data = {
  color: 0xa46565,
  emissive: 0x000000,
  emissiveIntensity: 1
}

export {
  createMeshLambertMaterial
}
